<template>
    <div>
        <div class="w1">
            <div class="w1_1" v-for="item in 10" :key="item">
                <div class="im1">
                    <img src="https://upload-bbs.mihoyo.com/upload/2022/05/09/277817628/a8506d84e059f2f73ecd674fb71e7ec5_8390754087263321266.jpg?x-oss-process=image/resize,s_500/quality,q_80/auto-orient,0/interlace,1/format,jpg" alt="">
                </div>
                <div class="im2">
                    <span class="ti1">真实吗顶顶顶</span>
                    <div class="im2_1">
                        <img src="https://img-static.mihoyo.com/communityweb/upload/296917e3c03b58d88eee8f38f76ae51f.png" alt="">
                        <span class="ti2">不是吧老铁</span>
                        <i class="el-icon-thumb"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
    .w1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: -23px;
        .w1_1 {
            // border: 1px solid red;
            margin-top: 23px;
            width: 220px;
            height: 200px;
            background-color: white;
            // position: absolute;
            .im1 {
                overflow: hidden;
                img:hover {
                    // max-width: 400px;
                    transform: scale(1.2);
                }
                img {
                    // max-width: 220px;
                    // max-height: 120px;
                    object-fit: cover;
                    width: 100%;
                    height: 150px;
                    border-radius: 5px 5px 0px 0px;
                    cursor: pointer;
                    transition: all 0.6s;
                }
            }
            .im2 {
                .ti1:hover {
                    color: #00c3ff;
                }
                .ti1 {
                    font-size: 10px;
                    padding: 5px;
                    cursor: pointer;
                    // border: 1px solid red;
                }
                .im2_1 {
                    // border: 1px solid red;
                    cursor: pointer;
                    margin-top: 3px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 5px;
                    img {
                        max-width: 30px;
                        border-radius: 50%;
                    }
                    .ti2 {
                        // border: 1px solid red;
                        font-size: 12px;
                        color: rgb(139, 139, 139);
                        margin-right: 76px;
                    }
                }
            }
        }
    }
</style>